<template>
  <UserInfo />
  <UserDetails :name="userName" :age="userAge" @custom-event="handleCustomEvent"/>
  <ElementDemo />
</template>

<script setup>
import UserDetails from './components/UserDetails.vue';
import ElementDemo from './components/ElementDemo.vue'
import { ref } from 'vue';

const userName = ref('Alice'); 
const userAge = ref(30);

function handleCustomEvent(eventData) { 
 console.log('Event received:', eventData.message); 
}
</script>


<!-- <script>
import UserDetails from './components/UserDetails.vue';
export default {
  components: {
    UserDetails
  }
} 
</script>  -->

<style scoped></style>
